<template>
    <el-drawer v-model="visible" :title="order.orderName" direction="rtl">
        <el-timeline>
            <el-timeline-item center placement="top">
                <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
            </el-timeline-item>
            <el-timeline-item center v-for="(item, index) in timeList" :timestamp="item.createdTime" placement="top">
                <el-card>
                    <el-row :span="24">
                        <el-col :span="8">
                            <el-tag v-if="item.isAdmin == 1" class="ml-2" type="danger"><el-icon>
                                    <Avatar />
                                </el-icon>管理员</el-tag>
                            <el-tag v-else-if="item.isAdmin == 0 && order.customerId == item.userId" class="ml-2"
                                type="success"><el-icon>
                                    <Avatar />
                                </el-icon>客户</el-tag>
                            <el-tag v-else-if="item.isAdmin == 0 && order.producerId == item.userId" class="ml-2"
                                type="warn"><el-icon>
                                    <Avatar />
                                </el-icon>技术支持</el-tag>
                            <el-tag v-else class="ml-2" type="danger"><el-icon>
                                    <Avatar />
                                </el-icon>管理员</el-tag>
                        </el-col>
                        <el-col :span="8">
                            <el-tag class="ml-2" type="success">{{ item.process }}</el-tag>
                        </el-col>
                        <el-col :span="4"></el-col>
                        <el-col :span="2">
                            <el-button type="danger" v-if="item.userId == userId" @click="handleDelete(item)"
                                :icon="Delete" />
                        </el-col>
                    </el-row>

                    <el-divider>
                        <el-icon><star-filled /></el-icon>
                    </el-divider>
                    <p>{{ item.content }}</p>
                    <el-divider> </el-divider>
                    <!--文件-->
                    <view v-for="(sfile, sindex) in item.fileIdList" @click="downloadFile(sfile, item.id)">
                        <file-cell :id="item.id" :fileId="sfile" ref="fileCellRef"></file-cell>
                    </view>
                </el-card>
            </el-timeline-item>
        </el-timeline>
    </el-drawer>
    <!--新增-->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="进度" prop="process">
                <el-input v-model="form.process" placeholder="请输入进度" style="width: 300px" />
            </el-form-item>
            <el-form-item label="进度描述" prop="content">
                <el-input v-model="form.content" type="textarea" placeholder="请输入进度描述" style="width: 300px" />
            </el-form-item>
            <el-form-item label="进度附件">
                <el-upload style="width: 240px; height: 80px" class="avatar-uploader" with-credentials name="file"
                    action="/dev-api/ufs/upload" :on-success="afterFileUpload" show-file-list
                    multiple>
                    <el-icon class="avatar-uploader-icon"><upload-filled /></el-icon>
                    <template #tip>
                        <div class="el-upload__tip">上传文章附件</div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="open = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { UploadFilled, Avatar, Delete, VideoPlay, Edit, Plus, Search, Refresh, Unlock, Lock, Files } from '@element-plus/icons-vue'
import FileCell from "@/custom/pms/components/FileCell/index.vue";
import { queryList, createOne, deleteOne } from "@/custom/pms/api/process";
import useUserStore from '@/store/modules/user'
const props = defineProps({
    order: {
        type: [Object],
    },
});
const emit = defineEmits(["confirm"]);
const { proxy } = getCurrentInstance();
const visible = ref(false);
const open = ref(false);
const title = ref("进度提交");
const timeList = ref([]);
const userId = ref(useUserStore().userId)
const form = ref({
    orderId: props.order.id,
    process: undefined,
    content: undefined,
    fileIdList: [],
});
const rules = ref({
    process: [{ required: true, message: "进度不能为空", trigger: "blur" }],
    content: [{ required: true, message: "进度描述为空", trigger: "blur" }],
});
// 下载文件
function downloadFile(fileId, processId) {

    window.location.href = '/dev-api/ufs/download/' + fileId 
}
// 删除
function handleDelete(item) {
    proxy.$modal
        .confirm('是否确认删除进度？')
        .then(function () {
            deleteOne(item.id).then(res => {
                processQuery();
            })
        })
        .then(() => {

            proxy.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
}
// 上传进度
function submitForm() {
    form.value.orderId = props.order.id;
    createOne(form.value).then((res) => {
        proxy.$modal.msgSuccess("新增成功");
        open.value = false;
        processQuery();
        proxy.resetForm("formRef");
    });
}
// 上传回调
function afterFileUpload(res) {
    let fileId = res.data.id;
    console.log(fileId);
    form.value.fileIdList = form.value.fileIdList.concat(fileId);
}
// 新增弹窗
function handleAdd() {
    open.value = true;
}
// 显示弹框
function show() {
    visible.value = true;
}
// 进度查询
function processQuery(tid) {
    let id = tid || props.order.id;
    const queryParams = {
        pageSize: 999,
        pageNum: 1,
        orderId: id,
    };
    proxy.$modal.loading("获取进度中~");
    queryList(queryParams).then((res) => {
        console.log(res);
        timeList.value = res.content;
        proxy.$modal.closeLoading();
    });
}
defineExpose({
    show,
    processQuery,
});
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 110px;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}</style>
  